<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm"  ref="dialogForm" v-if="dialogSendData.isAdd||!isList" :label-width="formLabelWidth">
			<el-card class="box-card">
			  <div slot="header" class="clearfix">
			    <span style="line-height: 30px;">订单信息</span>
			  </div>
			  <div class="text item">			
				  	<el-form-item label="订单号"  >
				      <el-input v-model="dialogForm.orderNumber" auto-complete="off" :disabled="true"></el-input>
				    </el-form-item>
				    <el-form-item label="经销商名称" >
				      <el-input v-model="dialogForm.dealerName" auto-complete="off" :disabled="true"></el-input>
				    </el-form-item>
				    <el-form-item label="汽车车型" >
				      <el-input v-model="dialogForm.carName" auto-complete="off" :disabled="true"></el-input>
				    </el-form-item>
				    <el-form-item label="车架号" >
				      <el-input v-model="dialogForm.vin" auto-complete="off" :disabled="true"></el-input>
				    </el-form-item>
				    <el-form-item label="物流公司" >
				      <el-input v-model="dialogForm.logisticsCompanyName" auto-complete="off" :disabled="true"></el-input>
				    </el-form-item>
				</div>
			</el-card>
			<el-card class="box-card" style="margin-top:25px;">
			  <div slot="header" class="clearfix">
			    <span style="line-height: 30px;">物流信息</span>
			  </div>
			  <div class="text item">			
				  	<el-form-item label="图片信息" >
				  	  <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				  	   
				    </el-form-item>
				    <el-form-item label="跟踪情况" >
				      <el-input v-model="dialogForm.situation" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				    <el-form-item label="" >
				        <el-checkbox v-if="dialogSendData.isAdd" v-model="dialogForm.isFinish">是否到达终点</el-checkbox>
				    </el-form-item>
				</div>
			</el-card>		
			<div style="text-align:right;margin-top:15px;">
				 <el-button v-if="dialogSendData.isAdd" @click="returnBack">返 回</el-button>
				 <el-button v-if="!dialogSendData.isAdd" @click="returnBackList">返 回</el-button>
				 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
			</div>
		</el-form>
		<div id="dialogTableBox" v-if="!dialogSendData.isAdd&&isList" >
			<el-table :data="dialogTableData.data" border  >
			    <el-table-column label="订单号" width="140">
			      <template scope="scope">
			        <span >{{ scope.row.orderNumber }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="跟踪情况" >
			      <template scope="scope">
			        <span >{{ scope.row.situation }}</span>
			      </template>
			    </el-table-column>			    
			    <el-table-column label="跟踪人" width="100">
			      <template scope="scope">
			        <span >{{ scope.row.operationPerson }}</span>
			      </template>
			    </el-table-column>
			     <el-table-column label="跟踪时间" width="180">
			      <template scope="scope">
			        <span >{{ scope.row.createDate }}</span>
			      </template>
			    </el-table-column>			   
			    <el-table-column label="图片信息" >
			      <template scope="scope">
			        <span :id="'smallImg'+scope.row.id">
			        	<img  v-for="(item,index) in scope.row.pic.split(',')" v-if="item!=''" class="smallImg"  @click="Viewer('smallImg'+scope.row.id)" :src='item' alt="" :key="index" >
			        </span> 
			      </template>
			    </el-table-column>
			</el-table>
			<div style="text-align:right;margin-top:15px;">
				 <el-button @click="returnBack">返 回</el-button>
			</div>
		</div>
		
	</div>
</template>
<script>
    var viewer;
    import qiniu from '@/views/qiniu/upload'
    import agentHttp from '@/utils/agentHttp.js'
    import Viewer from "static/viewer/viewer.js"
	export default{
		created(){
	    	this.selectData();//修改      	
        },
		props:['dialogSendData'],
		components:{qiniu},
		data(){			
			return{
				isList:true,
				follow:[{}],
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{		          
		        },
		        dialogTableData:[{		        	
		        }],
		        rules: {		         
		        },
		        //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]     //图片上传的列表  只含有url地址
		        },
		        packJson:{
					maxLength:3,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				}
			}
		},methods:{
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		            this.addData();
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
			},
			returnBackList(){
				this.isList=true;
			},
			handleSee(index, row){
                this.isList=false;
			},
			selectData(){
				agentHttp.get('adminApi/admin/logistics_trackeinfo/query_by_order_id/'+this.dialogSendData.id).then((data)=>{	
		            this.dialogTableData=data;
		        })
		        agentHttp.get('adminApi/admin/logistics_trackeinfo/get_order/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){  
		            	this.dialogForm=data.data;
		            	this.dialogForm.isFinish?'':this.$set(this.dialogForm,'isFinish',false);
		            	this.dialogForm.id = null;
		            } 
		        })
		    },
		    Viewer(id){
		      viewer=new Viewer(document.getElementById(id),{  
		        fullscreen:false,
		        hide: function (){  
		          viewer.update();
		          viewer.destroy()
		          },
		          show:function(){
		            viewer.update();
		          } 
		        });
		    },		    
		    //修改提交
		    addData(){
		    	this.dialogForm.pic=this.qiniuImage.image_uri.join(",");
		    	this.dialogForm.carOrderId = this.dialogSendData.id;
		        agentHttp.postJson('adminApi/admin/logistics_trackeinfo/post_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData',null);
		            	this.$message.success(data.data||"添加成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500)		            	
		            } 
		        }) 
		    }
		}
	};
	
</script>
<style scoped  >
  @import './../../../../static/viewer/viewer.styl';
</style>